<template>
  <div class="container">
    <canvas ref="canvasRef" tabindex="1" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useEditor } from "./core";
import { Keyboard, LoadModel, PickHelper } from "./plugins";
const canvasRef = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
  const editor = useEditor({ canvas: canvasRef.value! });
  editor.use(Keyboard);
  // editor.use(PickHelper);
  editor.use(LoadModel);
  editor.animate();
});
</script>

<style scoped>
.container {
  height: 100vh;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}
canvas:focus {
  outline: none;
}
</style>
